<template>
  <div>
    <span
      v-for="(item, index) in arr"
      :key="item.id"
      :class="{
        right: item.color === true,
        error: item.color === false,
        undo: item.color === '',
      }"
      >{{ index + 1 }} {{ item.status }}</span
    >
  </div>
</template>


<script>
export default {
  props: ["arr"],
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>